/**
 * Select Dropdown
 */
$header-height: 43;
$option-height: 40;
$side-margin: 16;

$compact-header-height: 35;

.select-dropdown {
	height: #{ $header-height }px;

	&.is-open {
		overflow: visible;
	}

	&.is-compact {
		height: #{ $compact-header-height }px;
	}
}

.select-dropdown__container {
	position: relative;
	display: inline-block;
	max-width: 100%;

	.select-dropdown.is-open & {
		z-index: z-index( 'root', '.select-dropdown.is-open .select-dropdown__container' );
	}

	.accessible-focus &:focus,
	.accessible-focus .select-dropdown.is-open & {
		z-index: z-index( 'root', '.accessible-focus .select-dropdown.is-open .select-dropdown__container' );
		.select-dropdown__header {
			border-color: $blue-wordpress;
		}
	}

	.accessible-focus & {
		border-radius: 4px;
	}

	.accessible-focus &:focus {
		border-color: #00aadc;
		outline: 0;
	}

	.accessible-focus .select-dropdown.is-open & {
		box-shadow: 0 0 0 2px $blue-light;
	}
}

.select-dropdown__header {
	height: #{ $header-height }px;
	line-height: #{ $header-height - 3 }px;
	padding: 0 75px 0 #{ $side-margin }px;
	box-sizing: border-box;

	border-style: solid;
	border-color: lighten( $gray, 20% );
	border-width: 1px 1px 2px;
	border-radius: 4px;
	background-color: $white;

	font-size: 14px;
	font-weight: 600;
	color: $gray-dark;
	transition: background-color 0.2s ease;
	cursor: pointer;

	// down-arrow
	&::after {
		@include noticon('\f431', 22px);

		display: block;
		width: 20px;
		line-height: #{ $header-height - 1 }px;
		color: rgba( $gray, 0.5 );

		position: absolute;
			right: 14px;
			top: 0px;

		.is-compact & {
			right: 5px;
			line-height: #{ $compact-header-height }px;
		}
	}

	.is-compact & {
		height: #{$compact-header-height }px;
		line-height: #{$compact-header-height - 3 }px;
		color: $gray-text-min;
		font-size: 11px;
		text-transform: uppercase;

		.count {
			border-width: 0;
			right: 25px;
			top: #{ ( $compact-header-height - 18 ) / 2 }px;
		}
	}

	.select-dropdown.is-open & {
		border-radius: 4px 4px 0 0;
		box-shadow: none;
		background-color: $gray-light;

		&::after {
			content: '\f432';
		}
	}

	.accessible-focus .select-dropdown:not(.is-open) .select-dropdown__container:focus & {
		box-shadow: 0 0 0 2px $blue-light;
	}

	.count {
		position: absolute;
		right: 40px;
		top: #{ ( $header-height - 18 - 2 ) / 2 }px;
	}
}

.select-dropdown__header-text {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.select-dropdown__options {
	box-sizing: border-box;
	padding: 0;
	list-style: none;
	margin: 0;
	background-color: $white;
	border: 1px solid lighten( $gray, 20% );
	border-top: 0;
	// $blue-wordpress for outer (with focus shadow), $gray for border with header
	border-radius: 0 0 4px 4px;
	height: 0;
	overflow: hidden;
	opacity: 0;

	.accessible-focus & {
		border: solid 1px $blue-wordpress;
		border-top-color: lighten( $gray, 20% );
	}

	.select-dropdown.is-open & {
		margin-top: -1px;
		height: auto;
		opacity: 1;
	}
}

.select-dropdown__option {
	height: #{ $option-height }px;

	&:last-child .select-dropdown__item {
		border-radius: 0 0 4px 4px;
	}
}

.select-dropdown__item {
	display: block;
	position: relative;
	height: #{ $option-height }px;
	line-height: #{ $option-height }px;
	padding: 0 #{ $side-margin + 46 }px 0 #{ $side-margin }px;

	color: $gray-dark;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;

	// hack to set text width in bold weight
	&::before {
		content: attr( data-bold-text );
		font-weight: 700;
		white-space: nowrap;
		opacity: 0;
	}

	&:visited {
		color: $gray-dark;
	}

	&.is-selected {
		background-color: $blue-medium;
		color: $white;

		.count {
			border-color: $white;
			color: $white;
		}
	}

	&.is-disabled {
		background-color: $white;
		color: $gray;
		cursor: default;
		opacity: .5;
	}

	.notouch & {
		// Make sure :visited links stay blue
		&:hover {
			color: $blue-medium;
		}

		&.is-selected:hover {
			color: $white;
		}
	}
}

.select-dropdown__item-count {
	&::before {
		content: attr( data-text );
		opacity: 0;
	}

	.count {
		position: absolute;
			top: #{ ( $option-height - 18 ) / 2 }px;
			right: #{ $side-margin }px;
	}
}

.select-dropdown__item-text {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: inherit;
	display: inline-block;
	max-width: 100%;
	position: absolute;
		left: #{ $side-margin }px;
		right: #{ $side-margin }px;
}

.select-dropdown__separator {
	border-top: 1px solid lighten( $gray, 20% );
	display: block;
	margin: 8px 0;
}

.select-dropdown__label {
	display: block;
	color: lighten( $gray, 10% );
	line-height: 20px;

	label {
		font-size: 12px;
		text-transform: uppercase;
		padding: 0px #{ $side-margin }px;
	}
}
